<script setup>
import { getCurrentInstance, reactive,ref } from 'vue'
import mvImg from "@/components/mvImg.vue"
const props = defineProps(["loading"])
const {proxy} = getCurrentInstance()
const suggestMv = reactive({})
const hotFlag = ref(false)
proxy.$https.suggestMv()
.then((res)=>{
    suggestMv.value = res.data.result
})
const items = ref([
  { type: 'info', label: '内地' },
  { type: 'info', label: '港台' },
  { type: 'info', label: '欧美' },
  { type: 'info', label: '日本' },
  { type: 'info', label: '韩国' },
]) 


//利用事件委托，减少绑定的事件
const tag = ref(null)
function changeArea (el){
    hotFlag.value=true
    const obj = {limit:4}
    tag.value.forEach(val=>{
        val.$el.classList.remove('mx')  
    })
    tag.value.map(item=>{
        if(el.target.parentNode==item.$el){
            el.target.parentNode.classList.add('mx')
            obj.area=el.target.innerHTML
        }
    })
    proxy.$https.getAreaMv(obj)
    .then((res)=>{
        suggestMv.value=res.data.data
        hotFlag.value=false
    })

}
</script>


<template>
    <main>
    <header>
        <h2 v-show="!props.loading">最新MV</h2>
         <div v-show="!props.loading"  @click="changeArea($event)" class="flex flex-wrap gap-2">
            <el-tag
            ref="tag"
            v-for="item in items"
            :key="item.label"
            :type="item.type"
            class="mx-1"
            effect="light"
            round
            >
            {{ item.label }}
            </el-tag>
        </div>
    </header>
    <p id="p" v-show="hotFlag">加载中...</p>
    <div v-show="!hotFlag" class="card">
        <mvImg 
        v-for="item in suggestMv.value"
        :url = item.picUrl||item.cover
        :id = item.id
        :name = item.name
        :artistName = item.artistName
        :playCount = item.playCount
        :loading="props.loading"
        :hotFlag="hotFlag"
        >
    </mvImg>
    </div>
    </main>
</template>

<style scoped>
main{
    margin-bottom: 30px;
}
header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}
.mx{
    background-color: black;
    color: aliceblue;
}
main h2 {
    font-weight: 600;
}

main .card{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
}

.el-tag{
    cursor: pointer;
}

#p{
    width: 100%;
    height: 230px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: pink;
    font-size: 50px;
    font-weight: 700;
}
</style>